<template>
  <AddOrEditDialog
    ref="addOrEditDialogRef"
    :form="roleForm"
    :formRules="formRules"
    title="角色"
    :formHeader="formHeader"
    :url="$urls.API_URL_BACKSTAGE_ROLE_MANAGE"
    :action="action"
    @afterSubmitSuccess="afterSubmitSuccess"
  >
    <!--    <template #name>
          <el-input
            v-model="roleForm['name']"
            clearable/>
        </template>-->
  </AddOrEditDialog>
</template>

<script lang="ts" setup>
import AddOrEditDialog from '@/components/base/table/form/AddOrEditDialog.vue';

import {
  computed,
  defineExpose, defineProps, getCurrentInstance, reactive, ref, withDefaults,
} from 'vue';
import { TableColumn, FormHeader } from '@/types/interface/base_interface';
import { yesOrNoDict } from '@/api/dict';
import { Department, Role } from '@/types/interface/auth_interface';

const { proxy } = getCurrentInstance();
// 接收父容器参数
interface Props {
  action?: string, // 表单的处理类型，post表示提交，put表示编辑
}
const props = withDefaults(defineProps<Props>(), {
  action: 'post',
});

// 表单元素
const formHeader = ref<FormHeader[]>([
  {
    label: '角色名称',
    prop: 'nameZh',
  },
  {
    label: '角色标识',
    prop: 'name',
  },
  {
    label: '级别',
    prop: 'level',
    type: 'number',
    rules: [{ type: 'number', message: '请输入数字类型' }],
  },
  {
    label: '默认角色',
    prop: 'defaultRole',
    type: 'switch',
  },
  {
    label: '启用状态',
    prop: 'enabled',
    type: 'switch',
  },
  {
    label: '描述',
    prop: 'description',
    placeholder: '请输入角色的描述',
    type: 'textarea',
  },
]);
// 表单对象
const roleForm = ref<Role>();
let formInit:Role; // 记录表单第一次传入的值,用于表单重置恢复初始值使用
const addOrEditDialogRef = ref(); // 表单对话框的ref对象
// 打开对话框，gong供父组件调用，传入表单对象
const openDialog = (role: Role) => {
  formInit = { ...role }; // 获取初始值，这里要做深拷贝，避免与form对象引用的地址一致，导致无法恢复初始值
  roleForm.value = { ...role };
  addOrEditDialogRef.value!.openDialog();
};
// 提交表单成功后的钩子函数
const afterSubmitSuccess = () => {
  // 让表单恢复为传入对象时的初始值，注意要深度拷贝，避免初始值收到污染
  roleForm.value = { ...formInit };
};
// 表单验证规则，用于全局表单验证
const formRules = reactive({
  nameZh: [
    {
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    {
      min: 2,
      max: 20,
      message: '长度必须在2-20个字符之间',
      trigger: 'blur',
    },
  ],
  name: [
    {
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
    {
      min: 2,
      max: 20,
      message: '必须在2-20个字符之间',
      trigger: 'blur',
    },
  ],
  level: [
    {
      required: true,
      message: '不能为空',
      trigger: 'blur',
    },
  ],
});
// 暴露组件给父容器使用
defineExpose({
  openDialog,
});
</script>

<style lang="scss" scoped>

</style>
